/* ================================================================================ ===== CSS STYLES FOR ===== ===== SCHOOLWAPPS PREMIUM THEME SKIN ===== ================================================================================ */ /* ---------------------------------- COLORS ---------------------------------- COLOR1: #a21617 COLOR2: #db2122 COLOR3: #ffd4d4 COLOR4: #8c1c1c IF YOU START ON A NEW SKIN THEN USE "FIND AND REPLACE" TO CHANGE THESE THROUGH THE WHOLE THEME BEFOrE YOU FINETUNE ---------------------------------- */ @import url('https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap'); /* ================================================================================ GENERAL SETTINGS ================================================================================ */ html { margin:0px; padding:0px; overflow-y:scroll; /* Altijd een scrollbalk afdwingen i.v.m. verspringingen */ scroll-behavior: smooth; } body { text-align:left; font-family: 'Roboto', Verdana, Arial, Sans-Serif; font-size:16px; line-height:1.5; } /* HEADINGS */ H1, H2, H3, H4, H5 {font-family: 'Roboto', Verdana, Arial, Sans-Serif; color:#db2122; font-weight:700; line-height:1.2; margin:0; padding-bottom:10px;} H1 {font-size:36px; color: #a21617; } H2 {font-size:28px;} H3 {font-size:24px;} H4 {font-size:20px;} H5 {font-size:18px;} .Home H1,.Home H2,.Home H3,.Home H4,.Home H5 {color: #a21617; } .Home H2 {font-size:36px; margin-bottom: 15px;} /* LINKS */ a:link, a:visited, a:active { color:#a21617; text-decoration:none; transition:color 0.3s ease; } a:hover { color:#db2122; text-decoration:none; } /* TABLES */ table {font-size:inherit;} /* om de lettergrootte in de editor gelijk te zetten */ table tr {} table tr th {} table tr td { vertical-align:top;} /* DNN SPECIFIC */ .Head, .SubHead, .SubSubHead, .Normal, .NormalTextBox, .NormalRed, .NormalBold, .CommandButton { font-family: inherit; color:inherit; line-height:inherit; font-size:inherit; font-weight: inherit;} .Head { font-size:15px;} /* style for module titles */ .SubHead {font-size:14px;} /* style of item titles on edit and admin pages */ .SubSubHead { font-size:13px;} /* module title style used instead of Head for compact rendering by QuickLinks and Signin modules */ .NormalBold { font-weight:bold;} /* Knop */ .Knop{ display: inline-block; margin: 0 auto; padding: 5px 15px; color: #ffffff !important; background-color: #a21617; transition: all 0.3s ease; border-radius: 10px; text-decoration:none !important;} .Knop.Groen{background-color: #a21617; border:1px solid #a21617; } .Knop.Groen:hover{background-color: #fff; color:#a21617 !important;} .Knop.Lichtgroen{background-color: #db2122; border:1px solid #db2122; } .Knop.Lichtgroen:hover{background-color: #fff; color:#db2122 !important;} .Knop.Oranje{background-color: #d6592e; border:1px solid #d6592e; } .Knop.Oranje:hover{background-color: #fff; color:#d6592e !important;} #Content .Container ul{list-style:none; margin-left:0;} #Content .Container ul li{} #Content .Container ul li:before{content:""; display:inline-block; vertical-align:middle; height:12px; width:12px; margin-right:15px; background-image:url('images/ster.png'); background-size:cover; background-repeat:no-repeat; background-position: center center;} #Content .Container.Lichtgroen ul li:before, #Content .Container.Groen ul li:before, #Content .Container.Oranje ul li:before{background-image:url('images/ster_wit.png'); } #Content .Container .dnnModuleSettings ul li:before, #Content .Container .reToolCell ul li:before, #Content .Container .reToolZone ul li:before, #Content .Container ul.dnnAdminTabNav li:before, #Content .Container ul.dnnActions li:before, #Content .Container .sc-content-block ul li:before{display:none;} /* ================================================================================ MAIN LAYOUT ================================================================================ */ .ControlPanel { } #Wrapper { margin:0px auto; min-height:100%; background-color:#ffffff; text-align:left;} .InnerWrapper { margin:0px auto; padding: 0 20px; max-width:1000px; position:relative; -webkit-box-sizing:border-box; box-sizing:border-box;} .CenterWrapper { margin:0px auto; padding:20px; max-width:800px; text-align:center; position:relative; -webkit-box-sizing:border-box; box-sizing:border-box;} .FlexWrapper{ display: -webkit-flex; display: flex; -webkit-justify-content:space-between; justify-content:space-between; -webkit-flex-wrap:wrap; flex-wrap:wrap;} /* HEADER SECTION */ #Header { position: relative; z-index: 999; background-color:rgba(255,255,255,1); padding: 20px 0; box-shadow: rgba(0,0,0,0.3) 0 0 6px; } #Header.StickyHeader {position: sticky; top:0; background-color:rgba(255,255,255,1);} .HeaderColumnLeft { width: 25%; } .HeaderColumnRight { width: 70%;} #Logo { display: block; width: 100%; height: 100%; background-size: contain; background-position: left center; background-repeat: no-repeat; text-indent: -999px; overflow: hidden;} /* SEARCH */ .SearchWrapper { height: 32px; display: -webkit-flex; display: flex; -webkit-justify-content:space-between; justify-content:space-between; -webkit-flex-wrap:wrap; flex-wrap:wrap; } .SearchWrapper .SearchInput { width: calc(100% - 32px); height: 32px; margin: 0; padding: 5px 10px; border: 1px solid #eeeeee; border-right-width: 0; font-family: 'Roboto', Verdana, Arial, Sans-Serif; font-size: 16px; line-height: 20px; background-color: #ffffff; outline: none !important; -webkit-box-sizing: border-box; box-sizing: border-box; } .SearchWrapper .SearchInput:focus { border-color: #aaaaaa;} .SearchWrapper .SearchInput::-webkit-input-placeholder { color:#cccccc;} .SearchWrapper .SearchInput:-moz-placeholder { color:#cccccc;} .SearchWrapper .SearchInput::-moz-placeholder {color:#cccccc; } .SearchWrapper .SearchInput:-ms-input-placeholder {color:#cccccc; } .SearchWrapper .SearchInput::-ms-input-placeholder { color:#cccccc; } .SearchWrapper .SearchSubmit { display: inline-block; padding: 5px 0px; width: 32px; height: 32px;font-family: 'Roboto', Verdana, Arial, Sans-Serif; font-size: 16px; line-height: 20px; color: #fff; background-color: #a21617; border: none !important; outline: none !important; cursor: pointer;} .SearchWrapper .SearchSubmit:before { display: inline-block; margin: 0; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size:16px; content: "\f002"; } .SearchWrapper .SearchSubmit:hover { text-decoration: none; background-color: #db2122; } #Search { width: 160px; float: right; position: relative; } /* desktop */ #MobiSearch { padding: 10px 10px 20px 10px; border-bottom:1px solid #f0f0f0;} /* mobile */ /* HEADER PANE */ .HeaderPane { float: right; margin: 0 10px 0 0;} .HeaderPane.dnnSortable { min-height: 32px!important;} .HeaderPane.DNNEmptyPane { min-width: 32px!important;} .HeaderPane .ContainerContent a { display: inline-block; padding: 6px 10px; line-height: 20px; color: #141414; } .HeaderPane .ContainerContent a:hover { color: #d6592e; } /* LOGIN */ #Login{ height: 32px; float: right; overflow: hidden;} a.inloggen { float: left; display: block; width: 32px; height: 32px; margin: 0; padding: 0; font-family: 'Font Awesome 5 Free'; font-size: 18px; font-weight: 900; line-height: 32px; text-align: center; color: #ffffff; transition: all 0.3s ease;} a.inloggen:before { content: "\f13e"; } a.inloggen:hover { text-decoration: none; color: #a21617;} /* dashboard link */ a.dashboard-link { float: left; display: block; height: 32px; margin: 0; padding: 0px 10px; line-height: 32px; color: #ffffff; background-color: #aaaaaa; transition: all 0.3s ease;} a.dashboard-link + a.dashboard-link {margin-left:20px;} a.dashboard-link:before { display: inline-block; margin: 0 5px 0 0; font-family: 'Font Awesome 5 Free'; font-weight: 900; content: "\f085"; } a.dashboard-link:hover { text-decoration: none; background-color: #444444;} a.ouderportaal-link:before { content: "\f007"; } a.moo-link:before { content: "\f0c2"; } .WidePane { width: 100%; } /* BREADCRUMB SECTION */ #Breadcrumb { margin: 0 0 20px 0; padding: 15px 0; background-color: #f8f8f8;} #Breadcrumb .BreadcrumbContainer {} #Breadcrumb .BreadcrumbContainer .Breadcrumb {} #Breadcrumb .BreadcrumbElementSeparator:before, #Breadcrumb .BreadcrumbContainer .BreadcrumbElementSeparator:before { display: inline-block; vertical-align: middle; padding: 0 8px; font-family: 'Font Awesome 5 Free'; font-size: 10px; font-weight: 900; content: "\f054"; } /* PANES SECTION */ #Content { padding: 0px 0 0 0;} #Content .Container { /* margin-bottom: 40px; */ } #Content .Row7 .Container { margin-bottom:0px; } #Content .Container.Lichtgroen, #Content .Container.Groen, #Content .Container.Oranje{color:#fff; border-radius: 12px; padding:20px; box-sizing:border-box;} #Content .Container.Lichtgroen h1, #Content .Container.Lichtgroen h2, #Content .Container.Lichtgroen h3, #Content .Container.Lichtgroen h4, #Content .Container.Lichtgroen h5, #Content .Container.Lichtgroen a, #Content .Container.Groen h1, #Content .Container.Groen h2, #Content .Container.Groen h3, #Content .Container.Groen h4, #Content .Container.Groen h5, #Content .Container.Groen a, #Content .Container.Oranje h1, #Content .Container.Oranje h2, #Content .Container.Oranje h3, #Content .Container.Oranje h4, #Content .Container.Oranje h5, #Content .Container.Oranje a{color:#fff;} #Content .Container.Lichtgroen a, #Content .Container.Groen a, #Content .Container.oranje a{text-decoration:underline;} #Content .Container.Lichtgroen{ background-color:#db2122; margin: 40px 0; } #Content .Container.Groen{ background-color:#a21617;} #Content .Container.Oranje{ background-color:#d6592e;} .one-half, .one-third, .two-third, .one-fourth, .three-fourth, .one-fifth, .two-fifth, .three-fifth, .four-fifth, .one-sixth, .five-sixth { float:left; margin-right:4%; -webkit-box-sizing:border-box; box-sizing:border-box; } .one-half.last, .one-third.last, .two-third.last, .one-fourth.last, .three-fourth.last, .one-fifth.last, .two-fifth.last, .three-fifth.last, .four-fifth.last, .one-sixth.last, .five-sixth.last { margin-right:0;} .one-half { width:48%;} .one-third { width:30.66%;} .two-third { width:65.33%;} .one-fourth { width:22%;} .three-fourth { width:74%;} .one-fifth {width:16.8%} .two-fifth { width:37.6} .three-fifth { width:58.4%} .four-fifth { width:79.2%} .one-sixth {width:13.33%} .five-sixth {width:82.66%} .Row9 { background-color: #f8f8f8; margin-top: 60px;} .Home .Row4 { background-color: #ffd4d4; margin: 0px 0 0 0; padding: 40px 0;} .Home .Row5 { /* background-color: #f8f8f8; */ margin: 0px 0 0 0; padding: 40px 0;} .Home .Row9 { background-color: transparent; margin-top: 0;} /* FOOTER SECTION */ #Footer { padding: 40px 0 0 0; color: #ffffff; background-color:#8c1c1c;} #Footer h1, #Footer h2, #Footer h3, #Footer h4, #Footer h5 { color: inherit; } #Footer a:link, #Footer a:visited , #Footer a:active { color: #ffffff; text-decoration:underline;} #Footer a:hover { color: #a21617; } #Footer .FlexWrapper .one-half { display: flex; flex-wrap: wrap; align-items: flex-start; } #SchoolWappsPromo { margin: 20px 0 0 0; padding: 10px 0; font-size: 10px; text-align: center; color: #666666; background-color: #eeeeee;} #SchoolWappsPromo a { color: #666666 !important;} #SchoolWappsPromo a:hover { color: #111111 !important; text-decoration: none;} /* == SOCIAL MEDIA LINKS == */ .social-media-links {width: 100%; margin: 10px 0 10px 0; align-self: flex-end;} .social-media-links h4 { margin-bottom: 5px; font-weight: 400; } .social-media-links a.social-media-link { display: inline-block; width: 36px; height: 36px; margin: 0; color: #ffffff !important; background-color: #a21617; overflow: hidden; text-indent: -999px; position: relative;text-align: left;} .social-media-links a.social-media-link:hover { text-decoration: none; background-color: #db2122;} .social-media-links .social-media-link + .social-media-link { margin-left: 5px;} .social-media-links .social-media-link:before { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; font-family: "Font Awesome 5 Brands"; font-size: 20px; line-height: 36px; font-weight: 400; text-indent: 0; text-align: center; } .social-media-links .social-media-link.facebook:before { content: "\f39e"; } .social-media-links .social-media-link.instagram:before { content: "\f16d"; } .social-media-links .social-media-link.linkedin:before { content: "\f0e1"; } .social-media-links .social-media-link.twitter:before { content: "\f099"; } .social-media-links .social-media-link.youtube:before { content: "\f167"; } #Content .Row11 .Container {margin-bottom: 0 ;} .instagram-feed-footer { text-align: center; } a.instagram-feed-link { display: inline-block; margin: 20px 0; padding: 5px 5px 5px 54px; position: relative; transition: all 0.3s ease; } a.instagram-feed-link:before { content: "\f16d"; display: block; width: 44px; height: 44px; position: absolute; top: 14px; left: 0; font-family: "Font Awesome 5 Brands"; font-size: 28px; line-height: 44px; text-align: center; color: #FFFFFF; background-color:#a21617; border-radius: 50%; transition: all 0.3s ease; } a.instagram-feed-link span { display: block; white-space: nowrap; font-size:20px; } a.instagram-feed-link:hover { text-decoration: none; color:#d6592e; } a.instagram-feed-link:hover:before { background-color:#d6592e; } .icon::before { display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; } .login::before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f007"; } /* ================================================================================ MENU'S ================================================================================ */ /* =================== RADMENU =================== */ .RadMenu{float:none;} #Menu { position:relative; width:100%; margin: 20px 0 -10px 0; } #SubMenu { margin: 20px 0; padding: 12px 20px; background-color:#a21617;} .DesktopMenu .RadMenu_MainMenu .rmHorizontal{white-space: nowrap; position:relative; display: flex; flex-wrap:wrap; float:right;} .DesktopMenu .RadMenu_MainMenu ul, .DesktopMenu .RadMenu_MainMenu li { margin:0px; padding:0px; list-style:none;} /* !!!!!!!!!! Fake RadMenu */ /* --ROOT-- */ .DesktopMenu .rmHorizontal .rmSlide {display:block !important; box-sizing:border-box; z-index:111; top:100%; left:0; overflow:hidden; height:0; position: absolute; } .DesktopMenu .rmHorizontal.rmRootGroup > .rmItem.rmLast > .rmSlide {left:auto; right:0} .DesktopMenu .rmHorizontal .rmGroup {opacity:0; transition:opacity 0.3s ease, transform 0.3s ease; transform:translate(0,-10px); } .DesktopMenu .rmHorizontal .rmItem {margin: 0px; padding: 0px; position: relative; clear: none; } .DesktopMenu .rmHorizontal .rmItem .rmLink { cursor: pointer; text-decoration: none; display:block; margin: 0px 3px; padding: 0px; } .DesktopMenu .rmHorizontal .rmItem .rmLink .rmText{width:100%; box-sizing: border-box; padding:0px 7px; line-height: 40px; font-size: 16px; display: block; white-space: normal; color:#fff; background-color:#a21617; border-radius:10px; transition:all 0.3s ease; } /*first,last,only*/ .DesktopMenu .rmHorizontal .rmItem.rmFirst{} .DesktopMenu .rmHorizontal .rmItem.rmLast {} .DesktopMenu .rmHorizontal .rmItem.rmOnly {} /*expanded,hover,selected,breadcrumb*/ .DesktopMenu .rmHorizontal.rmRootGroup .rmItem:has(.rmSlide) > .rmLink > .rmText:after {display: inline-block; color: inherit; margin-left:5px; font-family: 'Font Awesome 5 Free'; font-size: 14px; font-weight: 900; content: "\f078";} .DesktopMenu .rmHorizontal.rmRootGroup .rmItem:has(.rmSlide:hover) > .rmLink > .rmText {} .DesktopMenu .rmHorizontal.rmRootGroup .rmItem:hover > .rmLink .rmText {color:#fff; background-color:#db2122;} .DesktopMenu .rmHorizontal.rmRootGroup > .rmItem.rmSelected > .rmLink > .rmText {color:#fff; background-color:#db2122;} .DesktopMenu .rmHorizontal.rmRootGroup > .rmItem.rmBreadcrumb > .rmLink > .rmText {color:#fff; background-color:#db2122;} /*--SUB--*/ .DesktopMenu .rmHorizontal .rmLevel0 .rmGroup {transform:translate(-20px, 0px); } .DesktopMenu .rmHorizontal .rmItem:hover > .rmSlide { overflow:visible; height:auto; transform:translate(0px, 0px); padding:0px; border-radius:15px; box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;} .DesktopMenu .rmHorizontal .rmItem:hover > .rmSlide > .rmGroup {opacity:1; transform:translate(0px, 0px); width:100%;} .DesktopMenu .rmHorizontal .rmSlide .rmItem:hover .rmSlide {left:100%; top:0; } .DesktopMenu .rmHorizontal .rmGroup .rmItem {width:100%; margin:0;} .DesktopMenu .rmHorizontal .rmGroup .rmItem .rmLink {margin:0; padding:0; width:100%; display:block;} .DesktopMenu .rmHorizontal .rmGroup .rmItem .rmLink .rmText{ height:auto; min-width: 150px; width:100%; margin:0px; padding:8px 40px 8px 10px; line-height:1.3; font-size:16px; display:block; white-space:nowrap; background-color:#a21617; position: relative; border-radius:0 !important;} /*first,last,only*/ .DesktopMenu .rmHorizontal .rmGroup .rmItem.rmFirst {} .DesktopMenu .rmHorizontal .rmGroup .rmItem.rmFirst > .rmLink > .rmText{border-radius:10px 10px 0px 0px !important;} .DesktopMenu .rmHorizontal .rmGroup .rmItem.rmLast > .rmLink > .rmText{border-radius:0px 0px 10px 10px !important;} .DesktopMenu .rmHorizontal .rmGroup .rmItem.rmOnly > .rmLink > .rmText{border-radius:10px !important;} /*expanded,hover,selected,breadcrumb*/ .DesktopMenu .rmHorizontal .rmGroup .rmItem:has(.rmSlide:hover) > .rmLink > .rmText {} .DesktopMenu .rmHorizontal .rmGroup .rmItem:hover > .rmLink .rmText {color:#fff} .DesktopMenu .rmHorizontal .rmGroup .rmItem.rmSelected > .rmLink > .rmText {color:#fff} .DesktopMenu .rmHorizontal .rmGroup .rmItem.rmBreadcrumb > .rmLink > .rmText {color:#fff} .DesktopMenu .rmHorizontal .rmGroup .rmItem:has(.rmSlide) > .rmLink > .rmText:after{display: inline-block; color: inherit; position: absolute; top: 9px; right: 10px; font-family: 'Font Awesome 5 Free'; font-size: 14px; font-weight: 900; content: "\f054";} /* !!!!!!!!!! Fake Panelbar / submenu */ .DesktopMenu ul.rmRootGroup.rmVertical {width:100%; position: relative; z-index: 100;} .DesktopMenu .rmVertical .rmSlide {position:static} .DesktopMenu .rmVertical .rmGroup{transform:translateY(0px); transform:translateX(0px);} .DesktopMenu .RadMenu ul.rmRootGroup{ background-color:transparent; border:0;} .DesktopMenu .rmVertical .rmItem {padding:0} .DesktopMenu .rmVertical .rmItem .rmLink .rmText{ min-width:100px; background-color:transparent; color:#fff; font-size:18px; padding:4px 0 4px 25px; display:block; white-space:normal; position: relative; transition: all 0.3s ease; height:auto; line-height:inherit; } .DesktopMenu .rmVertical .rmItem .rmLink .rmText:before { content: ""; display: inline-block; width: 16px; height: 16px; background-image:url('images/menu_ster_oranje.png'); position: absolute; top: 9px; left: 0; transition: all 0.3s ease; } .DesktopMenu .rmVertical .rmSlide {display:none !important} .DesktopMenu .rmVertical .rmItem.rmBreadcrumb > .rmSlide {display:block !important; height:auto; } .DesktopMenu .rmVertical .rmItem.rmBreadcrumb > .rmSlide > .rmGroup {opacity:1} /*sub*/ .DesktopMenu .rmVertical .rmSlide .rmItem {margin-left:26px;} .DesktopMenu .rmVertical .rmSlide .rmItem .rmLink .rmText {padding:4px 0 4px 22px; font-size: 16px; } .DesktopMenu .rmVertical .rmSlide .rmItem .rmLink .rmText:before { width: 16px; height: 16px; top: 7px; background-image:url('images/menu_ster_oranje.png'); } /*expanded,hover,selected,breadcrumb */ .DesktopMenu .rmVertical .rmItem .rmLink:hover { text-decoration:none !important;} .DesktopMenu .rmVertical .rmItem:has(.rmSlide:hover) > .rmLink > .rmText { color:#db2122; } .DesktopMenu .rmVertical .rmItem:hover > .rmLink > .rmText { color:#db2122 !important; } .DesktopMenu .rmVertical .rmItem:hover > .rmLink > .rmText:before, .DesktopMenu .rmVertical .rmItem.rmSelected > .rmLink > .rmText:before { background-image:url('images/menu_ster_lichtgroen.png'); } .DesktopMenu .rmVertical .rmItem .rmSelected > .rmLink > .rmText { color:#fff; } .DesktopMenu .rmVertical .rmItem.rmBreadcrumb > .rmLink > .rmText { color:#fff;} /* ================================================================================ MOBILE MENU ================================================================================ */ .MobileMenuTrigger { display:none; width: 32px; height: 32px; margin: 0 5px 0 0; padding: 0; float: right; cursor:pointer; color:#a21617; font-size:24px; line-height:32px; text-align: center; } .MobileMenuTrigger:before { content: "\f0c9"; display: block; font-family: 'Font Awesome 5 Free'; font-weight: 900; } .MobileMenuTrigger.active, .MobileMenuTrigger:hover { color: #a21617; } .MobileMenuTrigger.active:before { content: "\f00d"; } #MobileMenu { display: none; margin: 0; padding: 10px 0 20px 0; width: 100%; clear:both; font-size: 16px; font-weight: 700; overflow-y: scroll; max-height: calc(100vh - 120px);} #MobileMenu * {-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;} #MobiNav { margin:0; text-align:left; display:block; padding:0; } #MobiNav ul {list-style:none; margin:0; padding:0 0 0 20px;} #MobiNav li {list-style:none; margin:0; padding:0 0 0 10px;} #MobiNav .item { min-height:40px; line-height:40px; border-bottom:1px solid #f8f8f8; position:relative; } #MobiNav .item a {color:#000 !important; display:block; width:calc(100% - 80px);} #MobiNav .item a:hover, #MobiNav .item.selected > a { text-decoration:none; color:#a21617 !important} #MobiNav .item.haschild:after { display:block; height:30px; width:30px; position:absolute; top:5px; right:10px; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size:16px; line-height:30px; content: "\f067"; color:#fff !important; background-color:#d6592e; text-align:center; cursor:pointer; transition:all .12s ease-in-out; } #MobiNav .item.haschild.active:after { content: "\f068"; background-color:#db2122; } #MobiNav .item .subLevel { display:none; } #MobiNav .item.haschild.active > .subLevel {display:block;} #MobiNav .subLevel .item.first {border-top:1px solid #f8f8f8;} #MobiNav .item.last {border-bottom:0;} /* ================================================================================ KNOPPEN ================================================================================ */ a.KnopLeesMeer { border-radius:10px; display: inline-block; margin: 0 auto; padding: 5px 15px; color: #ffffff; background-color: #F4D12D; transition: all .3s ease; } .KnopLeesMeer:hover { background-color: #D57425; } /* ================================================================================ SCROLL 2 TOP ================================================================================ */ #back-to-top { display: block; color: #fff; background-color:#db2122; position:fixed; bottom:10px; right:10px; width:45px; height:45px; text-shadow:none; z-index:980; line-height:45px; text-align:center; text-decoration:none; opacity: 0.5; transition:all 0.5s ease; cursor:pointer; } #back-to-top.active { bottom:10px; } #back-to-top.active:hover { opacity: 0.8; text-decoration:none; } #back-to-top:before { font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size:16px; content: "\f077"; } /* ================================================================================ AGENDA ================================================================================ */ /* CALENDAR MAIN */ #Content .ThemeDefault .EventTitle{ color:#fff; height:auto; background-color:#db2122; border: 1px solid #db2122;} #Content td.EventNextPrev + td{text-shadow:none; color:#fff; font-size: 24px; padding:10px 0px; letter-spacing:1px;} #Content td.EventNextPrev{text-shadow:none; color:#fff;} #Content td.EventNextPrev a:before{font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size:13px; content: "\f053"; vertical-align: middle; padding-right: 10px; color: #a21617;} #Content td.EventNextPrev ~ td.EventNextPrev{text-shadow:none; color:#fff;} #Content td.EventNextPrev ~ td.EventNextPrev a:before{content:"";} #Content td.EventNextPrev ~ td.EventNextPrev a:after{font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size:13px; content: "\f054"; vertical-align: middle; padding-left: 10px; color: #a21617;} #Content .EventNextPrev a:link, #Content .EventNextPrev a:visited, #Content .EventNextPrev a:active{color:#fff !important; font-size:16px; font-weight: 400;} #Content td.EventNextPrev a:hover { color: #a21617 !important; } #Content .ThemeDefault .EventTitle td{vertical-align:middle; font-weight: 400;} #Content .ThemeDefault {} #Content .ThemeDefault .EventDayHeader{font-size: 14px; font-weight: 400; padding: 6px 0px; background-color:#a21617; border: 1px solid #db2122;} #Content .ThemeDefault .EventDay{background-color:#fff; color:#444; border: 1px solid #db2122; font-size:14px; font-weight: 400;} #Content .ThemeDefault .EventWeekendDay{background-color:#fff;} #Content .ThemeDefault .EventOtherMonthDay{background-color:#eee;} #Content .ThemeDefault .EventDay .EventDayScroll > div > a{background-color:#d6592e; color:#fff; padding:0px 10px 0px 8px; font-size: 14px;} #Content .EventNextPrev a:link, #Content .EventNextPrev a:visited, .EventNextPrev a:active {color:#ccc;} #Content .ThemeDefault .EventTodayDay{background-color:#fff} #Content .DetailEvent{ } #Content .DetailEvent .Head { font-size: 28px; color: #d6592e;} #Content .DetailEvent .SubHead{ font-size: 20px; color: #db2122; } #Content .DetailEvent .Normal { font-size: 16px; color: #141414;} #Content .DetailEvent a[Title="Printen"]{display:none;} body .ThemeDefault.Eventtooltiptable { border-color: #d6592e;} body .ThemeDefault .Eventtooltipheader, body .ThemeDefault .Eventtooltipbody { } body .ThemeDefault .Eventtooltipheader { background-color: #d6592e; font-size: 14px; font-weight:400;} body .ThemeDefault .Eventtooltipbody { border-color: #d6592e; font-size: 12px;} /* CALENDAR VIEWER */ .CalendarViewer {margin: 40px 0;} .CalendarViewer h2 {} .CalendarItem { margin: 0 0 25px 0; display: -webkit-flex; display: flex; -webkit-justify-content:space-between; justify-content:space-between; -webkit-flex-wrap:wrap; flex-wrap:wrap; } .CalendarItem:last-of-type { margin: 0 0 40px 0;} .CalendarItem .CalendarDate { width: 90px; height: 90px; text-align: center; color: #ffffff; background-color: #d6592e; overflow: hidden; transition: all 0.3s ease; } .CalendarItem:hover .CalendarDate { background-color: #db2122; } .CalendarItem .CalendarDateDay { height: 55px; font-size: 36px; line-height: 55px;} .CalendarItem .CalendarDateMonth { height: 35px; font-size: 18px; line-height: 35px; background-color: #a21617;} .CalendarItem .CalendarContent { width: calc(100% - 110px); color: #141414;} .CalendarItem .CalendarContentTitle { margin: 5px 0; line-height: 1.3; font-size: 20px; font-weight: 700; color: #db2122; transition: all 0.3s ease; } .CalendarItem:hover .CalendarContentTitle { color: #a21617; } .CalendarItem .CalendarContentTekst { } .CalendarViewer > div:last-of-type { text-align: center;} .CalendarViewer .CalendarLink { display: inline-block; margin: 0 auto; padding: 5px 15px; color: #ffffff; background-color: #db2122; transition: all 0.3s ease; } .CalendarViewer .CalendarLink:hover { text-decoration: none; background-color: #d6592e;} /* ================================================================================ GOOGLE MAPS ================================================================================ */ #map-canvas { height: 300px; margin: 40px 0; } /* ================================================================================ FORMULIEREN ================================================================================ */ /* ===== DEFAULT STYLING ===== */ input.text, input[type="text"], input[type="button"], input[type="submit"], .input-checkbox { -webkit-appearance: none;appearance: none; border-radius: 0; } .dnnFormItem input[type="text"], .dnnFormItem input[type="text"]:active, .dnnFormItem input[type="text"]:focus, .dnnFormItem input[type="password"], .dnnFormItem input[type="password"]:focus, .dnnFormItem input[type="password"]:active, .dnnFormItem input[type="email"], .dnnFormItem input[type="email"]:active, .dnnFormItem input[type="email"]:focus, .dnnFormItem select, .dnnFormItem select:active, .dnnFormItem select:focus, .dnnFormItem textarea, .dnnFormItem textarea:active, .dnnFormItem textarea:focus, .dnnFormItem input[type="search"], .dnnFormItem input[type="search"]:active, .dnnFormItem input[type="search"]:focus{ border:1px solid #CCCCCC; background: none !important; background-color: #ffffff !important;-webkit-box-shadow:none !important;box-shadow:none !important; outline: none !important; border-radius: 0px;} /* Knoppen */ .dnnPrimaryAction, a.dnnPrimaryAction , .dnnSecondaryAction, a.dnnSecondaryAction, .dnnFormItem button, .dnnFormItem input[type="submit"], .dnnFormItem input[type="button"], .dnnFormItem input[type="reset"] { appearance: none;-webkit-appearance: none; box-shadow: none; text-shadow: none !important; line-height: inherit; display: inline-block; margin: 5px 10px 5px 0; padding: 5px 15px; font-size: 20px; font-weight: 300; background: none !important; background-color: #dddddd !important; border: none; border-radius: 0px; transition: all .3s ease; } .dnnPrimaryAction:hover, a.dnnPrimaryAction:hover, .dnnSecondaryAction:hover, a.dnnSecondaryAction:hover, .dnnFormItem button:hover, .dnnFormItem input[type="submit"]:hover, .dnnFormItem input[type="button"]:hover, .dnnFormItem input[type="reset"]:hover { color: #000 !important; background: none !important; background-color:#cccccc !important; text-decoration: none; } /* Primary afwijking */ .dnnPrimaryAction, .dnnFormItem input[type="submit"], a.dnnPrimaryAction { color: #fff !important; background-color: #a21617 !important; } .dnnPrimaryAction:hover, .dnnFormItem input[type="submit"]:hover, a.dnnPrimaryAction:hover{ color: #fff !important; background-color: #db2122 !important; } /* nested button quirk fix */ .dnnPrimaryAction .dnnPrimaryAction, a.dnnPrimaryAction a.dnnPrimaryAction, .dnnPrimaryAction .dnnPrimaryAction:hover, a.dnnPrimaryAction a.dnnPrimaryAction:hover, .dnnSecondaryAction .dnnSecondaryAction, a.dnnSecondaryAction a.dnnSecondaryAction, .dnnSecondaryAction .dnnSecondaryAction:hover, a.dnnSecondaryAction a.dnnSecondaryAction:hover { padding: 0 !important; margin: 0 !important; background:none !important;} /* ===== POWER FORMS ===== */ .DnnModule-DNNGoPowerForms { } .DnnModule-DNNGoPowerForms .form_list{} .DnnModule-DNNGoPowerForms .form_list .form_label{display:none;} .DnnModule-DNNGoPowerForms .form_list .form_input input[type="text"], .DnnModule-DNNGoPowerForms .form_list .form_input textarea, .DnnModule-DNNGoPowerForms .form_list .form_input select, .Theme_Normal_Default input[type="text"] {appearance: none;-webkit-appearance: none; -moz-appearance: none; outline: none !important; box-shadow: none !important; border:1px solid #CCCCCC; margin: 0; padding: 5px 10px; font-family: inherit; } .DnnModule-DNNGoPowerForms .form_list .form_input select option:first-child { color: #aaaaaa; } .DnnModule-DNNGoPowerForms .form_list .form_input input[type="text"]::-webkit-input-placeholder, .DnnModule-DNNGoPowerForms .form_list .form_input textarea::-webkit-input-placeholder { color: #cccccc; } .DnnModule-DNNGoPowerForms .form_list .form_input input[type="text"]::-moz-placeholder, .DnnModule-DNNGoPowerForms .form_list .form_input textarea::-moz-placeholder { color: #cccccc; } .DnnModule-DNNGoPowerForms .form_list .form_input input[type="text"]:-ms-input-placeholder, .DnnModule-DNNGoPowerForms .form_list .form_input textarea:-ms-input-placeholder { color: #cccccc; } .DnnModule-DNNGoPowerForms .form_list .form_input input[type="text"]:-moz-placeholder, .DnnModule-DNNGoPowerForms .form_list .form_input textarea:-moz-placeholder { color: #cccccc; } .DnnModule-DNNGoPowerForms .form_submit .btn{ color: #fff !important; font-size: 20px !important;padding: 5px 15px !important; appearance: none;-webkit-appearance: none; box-shadow: none !important; text-shadow: none !important; line-height: 30px !important; display: inline-block !important; margin: 5px 10px 5px 0; padding: 5px 15px; color: #ffffff; font-family: inherit; font-size: 20px; background: #a21617 !important; border: none !important; border-radius: 0px; transition: all .3s ease; } .DnnModule-DNNGoPowerForms .form_submit .btn:hover{ text-decoration: none; background-color: #db2122 !important; color: #ffffff !important;} .DnnModule-DNNGoPowerForms .form_required {color:red !important;} #Content .Container ul.form_list li:before { display:none } #Content .Container ul.form_list li {padding-left:0;} /* ===== ENGAGE SURVEY ===== */ /* list */ .survey-listing { } .survey-listing ul.sl-repeater, .survey-listing ul.sl-repeater li { border-color: #ddd; } .survey-listing ul.sl-repeater li.sl-item { background-color: #f8f8f8; } .survey-listing ul.sl-repeater li.sl-alt-item { } .survey-listing .sl-repeater-data .sl-title { font-size: 20px; font-weight: 400; } .survey-listing .sl-repeater-data .sl-desc { } /* form */ .DnnModule-EngageSurvey .survey-title { font-size: 24px; } .DnnModule-EngageSurvey .section-wrap { margin: 0 0 20px 0; } .DnnModule-EngageSurvey .section-wrap .section-title { font-weight: 400; } .DnnModule-EngageSurvey .section-wrap .question { font-weight: 700; } .DnnModule-EngageSurvey .section-wrap input[type="text"], .DnnModule-EngageSurvey .section-wrap textarea, .DnnModule-EngageSurvey .section-wrap select { width: 100%; box-sizing: border-box;appearance: none;-webkit-appearance: none; -moz-appearance: none; outline: none !important; box-shadow: none !important; border:1px solid #CCCCCC; margin: 0; padding: 5px 10px; font-family: inherit; } .DnnModule-EngageSurvey input[type="text"]::-webkit-input-placeholder, .DnnModule-EngageSurvey textarea::-webkit-input-placeholder { color: #cccccc; } .DnnModule-EngageSurvey input[type="text"]::-moz-placeholder, .DnnModule-EngageSurvey textarea::-moz-placeholder { color: #cccccc; } .DnnModule-EngageSurvey input[type="text"]:-ms-input-placeholder, .DnnModule-EngageSurvey textarea:-ms-input-placeholder { color: #cccccc; } .DnnModule-EngageSurvey input[type="text"]:-moz-placeholder, .DnnModule-EngageSurvey textarea:-moz-placeholder { color: #cccccc; } .DnnModule-EngageSurvey .submit-button{ appearance: none;-webkit-appearance: none; box-shadow: none !important; text-shadow: none !important; line-height: inherit; display: inline-block !important; margin: 5px 10px 5px 0; padding: 5px 15px; color: #ffffff; font-family: inherit; font-size: 20px; background: #a21617 !important; border: none !important; border-radius: 0px; transition: all .3s ease; } .DnnModule-EngageSurvey .submit-button:hover{ text-decoration: none; background-color: #db2122 !important; color: #ffffff !important;} .DnnModule-EngageSurvey .back-button { appearance: none;-webkit-appearance: none; box-shadow: none; text-shadow: none !important; line-height: inherit; display: inline-block; margin: 5px 10px 5px 0; padding: 5px 15px; font-size: 20px; font-weight: 300; background: none !important; background-color: #dddddd !important; border: none; border-radius: 0px; transition: all .3s ease; } .DnnModule-EngageSurvey .back-button:hover { color: #000 !important; background: none !important; background-color:#cccccc !important; text-decoration: none; } /* ================================================================================ PHOTO MODULE ================================================================================ */ .ModSimpleGalleryC .album-item a img {object-fit:cover;} .ModSimpleGalleryC .photo-frame a img {object-fit:cover;} #lightbox-container-image-box { max-width:calc(100vw - 17px); overflow:hidden; height:auto !important;} #jquery-lightbox { max-width:100vw; overflow:hidden;} #lightbox-container-image-data-box { max-width:calc(100vw - 17px); overflow:hidden;} /* ================================================================================ DOCUMENTS MODULE ================================================================================ */ .DNN_Documents {} .DNN_Documents .dnnGrid { border: none; } .DNN_Documents .dnnGrid .dnnGridHeader { border-bottom: 1px solid #D8D8D8;} .DNN_Documents .dnnGrid .dnnGridHeader td { padding: 6px 5px; font-weight: 700; background-image: none; border: none; color: #00184E; } .DNN_Documents .dnnGrid .dnnGridItem { } .DNN_Documents .dnnGrid .dnnGridAltItem { background-color: #f8f8f8;} .DNN_Documents .dnnGrid .dnnGridItem td, .DNN_Documents .dnnGrid .dnnGridAltItem td { padding: 6px 5px; } .DNN_Documents .dnnGrid a {} .DNN_Documents .dnnGrid a:hover { color: #00184E; text-decoration: none;} .DownloadCell a { text-transform: uppercase; font-weight: 700;} /* ================================================================================ COOKIE CONSENT ================================================================================ */ #CookieConsent { position: fixed; bottom: 0; left: 0; z-index: 100; width: 100%; padding: 10px; color: #444; background-color: #eee; box-sizing: border-box;} .cookie-consent { text-align: center; } .cookie-consent_message span, .cookie-consent_dismisslink, .cookie-consent_link { display: inline-block; padding: 5px 10px; } a.cookie-consent_dismisslink { margin: 0 10px; color: #ffffff; background-color: #41a23e; border-radius: 4px;} a.cookie-consent_dismisslink:hover { text-decoration: none; color: #ffffff; background-color: #2b7b29; } a.cookie-consent_link { } a.cookie-consent_link:hover { } /* BIG BANNER - 2SXC */ .BigBanner {position: relative; } .BigBannerImages { height: 500px; position: relative; z-index: 1; } .BigBannerImage { width: 100%; height: 100%; background-size: cover; background-position: center center;} .BigBannerContent { width: 100%; padding: 20px 60px; background-color: rgba(255,255,255,0.7); position: absolute; left: 0; bottom: 0; z-index: 1; box-sizing: border-box; } .BigBannerContent.Gecentreerd { text-align: center;} .BigBannerContent.Rechts { text-align: right;} .BigBannerTitle { font-size: 32px; line-height: 1.3; color: #d6592e;} .BigBannerText { margin: 10px 0; font-size: 18px;} a.BigBannerLink { display: inline-block; margin: 0 auto; padding: 5px 15px; color: #ffffff; background-color: #a21617; transition: all .3s ease; } a.BigBannerLink:hover { text-decoration: none; background-color: #d6592e } .BigBannerControlButton { width: 36px; height: 36px; padding: 0; line-height: 36px; text-align: center; position: absolute; z-index: 3; color: #ffffff; background-color: #db2122; opacity: 0.5; border: none; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size:20px; box-sizing: border-box; transition: all 0.3s ease; cursor: pointer;outline: none;} .BigBannerControlButton:hover { opacity: 0.8; } .BigBannerControlButton.Previous{ bottom: 50%; left: 20px; padding-right: 2px;} .BigBannerControlButton.Previous:before{ content: "\f053"; } .BigBannerControlButton.Next{ bottom: 50%; right: 20px; padding-left: 2px;} .BigBannerControlButton.Next:before{ content: "\f054"; } /* SMALL BANNER - 2SXC */ .SmallBanner { position: relative;} .SmallBannerItems { height: 300px; position: relative; z-index: 1; } .SmallBannerItem { width: 100%; height: 100%; padding: 30px 0; position: relative;box-sizing: border-box; background-color: #a21617; } .SmallBannerImage{position: absolute; z-index: 0; top: 0; left: 0; width: 100%; height: 100%; background-color: #a21617; background-size: cover; background-position: center center; opacity: 0.2; } .SmallBannerContent { position: relative; z-index: 2; padding: 0 60px; text-align: center; height: 100%; } .SmallBannerContent .InnerWrapper { position: relative; z-index: 2; height: 100%; display: -webkit-flex; display: flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; align-content: center;} .SmallBannerContent .SmallBannerItemText { width: 100%; margin: 0 0 20px 0; padding: 0 50px; font-size: 36px; color: #ffffff; box-sizing: border-box;} .SmallBannerContent .SmallBannerItemLink { display: inline-block; margin: 0 auto; padding: 5px 15px; color: #ffffff; background-color: #d6592e; transition: all .3s ease; } .SmallBannerContent .SmallBannerItemLink:hover { text-decoration: none;background-color: #db2122; } .SmallBannerControlButton { width: 36px; height: 36px; padding: 0; line-height: 36px; text-align: center; position: absolute; z-index: 3; color: #141414; background-color: #ffffff; opacity: 0.5; border: none; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size:20px; box-sizing: border-box; transition: all 0.3s ease; cursor: pointer; transform: translateY(-50%); outline: none; } .SmallBannerControlButton:hover { opacity: 0.8; } .SmallBannerControlButton.Previous{ top: 50%; left: 20px; padding-right: 2px;} .SmallBannerControlButton.Previous:before{ content: "\f053"; } .SmallBannerControlButton.Next{ top: 50%; right: 20px; padding-left: 2px;} .SmallBannerControlButton.Next:before{ content: "\f054"; } /* QUICK LINKS - 2SXC */ .QuickLinks { margin: 40px 0; } .QuickLinks ul { margin: 0; padding: 0; list-style-type: none; } .QuickLinksItem { margin: 0 0 20px 0; } .QuickLinksItem:last-child { margin: 0; } .QuickLinksItem .QuickLinksItemLink { display: block; height: 48px; font-size: 20px; line-height: 48px; padding: 0 10px 0 48px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #ffffff; background-color: #d6592e; position: relative; transition: all 0.3s ease; } .QuickLinksItem .QuickLinksItemLink:before { content: ""; display: inline-block; width: 18px; height: 18px; background-color: #a21617; border: 2px solid #ffffff; position: absolute; top: 13px; left: 13px; transition: all 0.3s ease; } .QuickLinksItem .QuickLinksItemLink:hover { background-color: #a21617; } .QuickLinksItem .QuickLinksItemLink:hover:before { background-color: #db2122; } /* BLOCK LINKS - 2SXC */ .BlockLinks { width: 100%; padding: 80px 0; display: -webkit-flex; display: flex; -webkit-justify-content:space-between; justify-content:space-between; -webkit-flex-wrap:wrap; flex-wrap:wrap; } .BlockLinkItem { width: 30%; background-size: cover; background-position: center center; position: relative; background-color: #db2122; overflow:hidden;margin-top:20px;} .BlockLinkItemImage { width: 100%; height: 100%; background-size: cover; background-position: center center; position: absolute; top: 0; left: 0; z-index: 1; opacity: 0.4; } .BlockLinkItem .sc-menu { position: relative; z-index: 2;} .BlockLinkItem .BlockLinkItemLink {display: block; width: 100%; height: 200px; position: relative; z-index: 2; overflow: hidden; color: #fff;} .BlockLinkItem .BlockLinkItemLinkText { display: block; position: absolute; left: 0; bottom: 40px; width: 100%; padding: 0 20px; font-size: 20px; text-align: center; box-sizing: border-box; transition: all .3s ease; } .BlockLinkItem .BlockLinkItemLinkMoreInfo { display: inline-block; padding: 5px 15px; color: #ffffff; background-color: #a21617; position: absolute; left: 50%; bottom: -150px; transform: translateX(-50%); transition: all .3s ease; } .BlockLinkItem:hover { background-color: #d6592e; } .BlockLinkItem:hover .BlockLinkItemLinkText { bottom: 90px; } .BlockLinkItem:hover .BlockLinkItemLinkMoreInfo { bottom: 40px;} /* SMOELENBOEK - 2SXC */ .Medewerkerslijst{ } .MedewerkerslijstItems{ display: flex; flex-wrap: wrap; list-style-type: none; margin: 0; padding: 0; } .MedewerkerslijstItem{ width: 30%; margin: 0 5% 25px 0; } .MedewerkerslijstItem:nth-child(3n+3){ margin-right: 0; } .MedewerkerslijstItemImage { width: 130px; height: 130px; margin: 0 auto 15px auto; background-size: cover; background-position: center; background-repeat: no-repeat; } .MedewerkerslijstItemContent { text-align: center; } .MedewerkerslijstItemContentName { color: #D57425; font-weight: 700; } .MedewerkerslijstItemContentText1 {} .MedewerkerslijstItemContentText2 {} .ThemeRounded .MedewerkerslijstItemImage { border-radius: 10px;} .ThemeCircular .MedewerkerslijstItemImage { border-radius: 50%; } .VacatureLijst{} .VacatureLijstHeader {padding:20px 0 40px 0} .FilterKnop { cursor:pointer} .FilterKnop.active{ background-color: #287ad2;} .VacatureItem {padding-bottom:20px; border-bottom:1px dashed #1a4e86; width:100%; margin-bottom:20px;} .VacatureTitel {padding-bottom:5px; font-size:20px;} .VacatureLocatie {padding-bottom:5px; font-weight:700} .VacatureLocatie span { font-weight:400} /* ================================================================================ KERNWAARDEN VIEWER ================================================================================ */ .KernwaardenBigText { text-align: center; font-size: 48px; font-family: 'Roboto', Verdana, Arial, Sans-Serif; color:#df4937; line-height: 1; padding-bottom: 30px; display: inline-block; position: relative; width: auto; padding-right: 60px; } .Kernwaarden { display: flex; justify-content: space-between; flex-wrap: wrap; margin: 0px;} .KernwaardeItem { width: 48%; padding-bottom:40px; } #Wrapper.Home .KernwaardeItem { width: 31%;} .KernwaardeLink { display: block; width: 100%; height: 250px; background-color: transparent; perspective: 1000px; } .KernwaardeKaart { position: relative; width: 100%; height: 100%; text-align: center; background-color: #a21617; border-radius:10px; transition: transform 0.8s; transform-style: preserve-3d; } .KernwaardeLink:hover .KernwaardeKaart { transform: rotateY(180deg); } .KernwaardeKaartVoorkant { position: absolute; width: 100%; height: 100%; padding: 20px; -webkit-backface-visibility: hidden; /* Safari */ backface-visibility: hidden; box-sizing: border-box; color: #ffffff; border-radius:10px; display: flex; align-items: flex-end; background-size: cover; background-position: center; } .KernwaardeWaarde .KernwaardeKaart{background-color:#d7f0f0;} .KernwaardeWaarde .KernwaardeKaartVoorkant{background-size: contain; background-repeat: no-repeat;} .KernwaardeKaartVoorkant .KernwaardeTitel { text-shadow: 0 0 4px #000; display: block; position: absolute; left: 0; bottom: 40px; width: 100%; padding: 0 20px; font-size: 20px; text-align: center; box-sizing: border-box; transition: all .3s ease; } .KernwaardeKaartAchterkant { position: absolute; width: 100%; height: 100%; padding: 15px; -webkit-backface-visibility: hidden; /* Safari */ backface-visibility: hidden; box-sizing: border-box; background-color: #a21617; color: #fff; border-radius:10px; transform: rotateY(180deg);} .KernwaardeWaarde .KernwaardeKaartAchterkant{text-align:center; display:flex !important; align-items: center; justify-content: center; font-size:18px; padding:0px 15px;} .KernwaardeWaarde .KernwaardeKaartAchterkant .KernwaardeTitel{display:none;} .KernwaardeWaarde .KernwaardeKaartAchterkant .KernwaardeTekst{max-height:unset;} .KernwaardeWaarde .KernwaardeKaartAchterkant .KernwaardeTekst strong{font-size:22px;} .KernwaardeKaartAchterkant .KernwaardeTitel { font-weight: 700; font-size:22px; padding-bottom:5px; } .KernwaardeKaartAchterkant .KernwaardeTekst { max-height: 145px; overflow-y: hidden;} .KernwaardeKaartAchterkant .KernwaardeKnop { display: inline-block; margin: 10px auto 0 auto; padding: 3px 10px; border-radius: 5px; color: #fff; background-color: #213b78; } .KernwaardeItem:nth-child(3n+1) .KernwaardeKaartAchterkant { background:#a21617; } .KernwaardeItem:nth-child(3n+2) .KernwaardeKaartAchterkant { background:#db2122; } .KernwaardeItem:nth-child(3n+3) .KernwaardeKaartAchterkant { background:#d6592e; } @media only screen and (max-width: 768px) { .KernwaardeItem { width: 48%; margin-bottom: 20px; } } @media only screen and (max-width: 479px) { .KernwaardeItem { width: 100%; } } /* ================================================================================ AFBEELDINGEN VIEWER ================================================================================ */ .Afbeelding { display: flex; justify-content: space-between; flex-wrap: wrap; margin: 0px;} .AfbeeldingItem { width: 48%; padding-bottom:40px; } #Wrapper.Home .AfbeeldingItem { width: 23%;} .AfbeeldingItemWrapper{width: 100%; height: 250px; position:relative; border-radius:10px; overflow:hidden;} #Wrapper.Home .AfbeeldingItemWrapper{ height:auto; overflow:none;} .AfbeeldingImg {position: absolute; width: 100%; height: 100%; padding: 20px; box-sizing: border-box; color: #ffffff; display: flex; align-items: flex-end; background-size: cover; background-position: center;} #Wrapper.Home .AfbeeldingImg {position:relative; background-size:contain; background-repeat:no-repeat; height:250px; width:100%;} .AfbeeldingFade{position:absolute; width: 100%; height: 50%; bottom:0; left:0; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,a21617+100&0+0,1+100 */ background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(0,148,154,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(0,148,154,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(0,148,154,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ } #Wrapper.Home .AfbeeldingFade{display:none;} .AfbeeldingTitle { color:#fff; text-shadow: 0 0 4px #000; display: block; position: absolute; left: 0; bottom: 40px; width: 100%; padding: 0 20px; font-size: 20px; text-align: center; box-sizing: border-box; transition: all .3s ease; } #Wrapper.Home .AfbeeldingTitle { color:#a21617; display: block; position: relative; text-shadow:none; bottom:auto; left:auto; margin-top:20px; padding:0;} @media only screen and (max-width: 768px) { #Wrapper.Home .AfbeeldingItem, .AfbeeldingItem { width: 48%; margin-bottom: 20px; } } @media only screen and (max-width: 479px) { #Wrapper.Home .AfbeeldingItem, .AfbeeldingItem { width: 100%; } } /* ================================================================================ Curator MODULE ================================================================================ */ #curator-feed-viviani-het-talant-2{ padding:0; margin:50px 0; } #curator-feed-viviani-het-talant-2 .crt-post-read-more-button {background-color:#a21617; color:#FFF;} #curator-feed-viviani-het-talant-2 .crt-post-read-more-button:hover {background-color:#db2122;} /* #curator-feed-viviani-het-talant-2 .crt-post .crt-post-max-height-read-more {background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #e2fcd6 50%);} */ #curator-feed-viviani-het-talant-2 .crt-post-border { border: 1px solid rgba(0,0,0,.1); } #curator-feed-viviani-het-talant-2 .crt-icon-instagram {color:#a21617;} .crt-widget {margin:40px 0;} /* ================================================================================ PUBLICATIE MODULE ================================================================================ */ /* ARTICLE LIST */ .pubArticleList {} .pubArticleList .pubTitle { } .pubArticleList .pubControls { padding:10px 0px;} .pubArticleList .pubSort { } .pubArticleList .pubPager { } .pubArticleList .pubItem { margin: 40px 0 0 0; -webkit-align-items: flex-start; align-items: flex-start; } .pubArticleList .pubItem.first { margin: 10px 0 0 0;} .pubArticleList .pubItem .pubThumbnail { height: 120px; background-size: cover; background-position: center center; } .pubArticleList .pubItem .pubContent { } .pubArticleList .pubItem .pubContent .pubTitle { font-size: 24px; color: #db2122; padding-bottom: 5px; } .pubArticleList .pubItem .pubContent .pubDate { color:#d6592e; } .pubArticleList .pubItem .pubContent .pubSummary { padding: 5px 0 10px 0; } .pubArticleList .pubItem .pubContent .pubMoreLink { } .pubArticleList .pubItem .pubContent .pubMoreLink .Knop { display: inline-block; margin: 0 auto; padding: 5px 15px; color: #ffffff; background-color: #a21617; transition: all .3s ease; } .pubArticleList .pubItem .pubContent .pubMoreLink .Knop:hover { background-color: #db2122; } /* ARTICLE DETAILS */ .pubArticleDetails {} .pubArticleDetails .pubTitle { } .pubArticleDetails .pubDate { margin: 0 0 10px 0; color:#d6592e;} .pubArticleDetails .pubContent { } .pubArticleDetails .pubReturnLink { margin: 40px 0; } .pubArticleDetails .pubReturnLink .Knop { } .pubArticleDetails .pubReturnLink .Knop { display: inline-block; margin: 0 auto; padding: 5px 15px; color: #ffffff; background-color: #a21617; transition: all .3s ease; } .pubArticleDetails .pubReturnLink .Knop:hover { background-color: #db2122; } .pubArticleDetails .pubFileBox {} .pubArticleDetails .pubFileBox .FileBoxHead{color:#ffffff; background-color:#d6592e; font-weight: 400;} .pubArticleDetails .pubFileBox .FileBoxBody{background-color:#ffffff; padding: 10px;} .pubArticleDetails .pubFileBox .FileBoxUnsortedList .ImageList img, .pubArticleDetails .pubFileBox .ThumbnailImg{ border-radius:0; } /* ARTICLE VIEWER */ .pubArticleViewer { padding: 20px 0; } .pubArticleViewer .pubItem { display: block;margin: 0 0 20px 0; } .pubArticleViewer .pubItem:last-of-type { margin: 0; } .pubArticleViewer .pubItem .pubTitle { font-size:18px; font-weight:700; color: #a21617; transition: all .3s ease; } .pubArticleViewer .pubItem:hover .pubTitle { color: #db2122;} .pubArticleViewer .pubItem .pubDate { color:#d6592e;} .pubArticleViewer .pubItem .pubSummary { color: #141414; } .pubViewerHome { margin: 40px 0; text-align: center;} .pubViewerHome h2 { } .pubViewerHome .pubItems { width: 100%; display: -webkit-flex; display: flex; -webkit-justify-content:space-between; justify-content:space-between; -webkit-flex-wrap:wrap; flex-wrap:wrap;} .pubViewerHome .pubItem { display: block; width: 30%; color: #141414; margin: 0 0 30px 0; } .pubViewerHome .pubItem .pubThumbnail { height: 160px; background-size: cover; background-position: center center; transition: all .3s ease;} .pubViewerHome .pubItem .pubContent { padding:10px 0; text-align: center;} .pubViewerHome .pubItem .pubContent .pubTitle { font-size: 20px; font-weight: 700; line-height: 1.3; color: #db2122; } .pubViewerHome .pubItem .pubContent .pubDate { color:#d6592e;} .pubViewerHome .pubItem .pubContent .pubSummary { margin: 5px 0 15px 0; } .pubViewerHome .pubItem .pubContent .pubLink { display: inline-block; margin: 0 auto; padding: 5px 15px; color: #ffffff; background-color: #a21617; transition: all .3s ease; } .pubViewerHome .pubItem:hover .pubContent .pubLink { background-color: #db2122; } .pubViewerHome .pubLink { display: inline-block; margin: 0 auto; padding: 5px 15px; color: #ffffff; background-color: #db2122; transition: all .3s ease; } .pubViewerHome .pubLink:hover { background-color: #d6592e; } /* SIDEBAR */ .pmsb_wrap { } .pmsb_wrap .pm_block {} .pmsb_wrap .pm_block .pm_block_header { font-size: 18px; } .pmsb_wrap .pm_block ul { } .pmsb_wrap .pm_block ul li { } .pmsb_wrap .pm_block ul li a, .pmsb_wrap .pm_block ul li span { } .pmsb_wrap #txtSearch { border: 2px solid #009DE0; padding: 5px;} .pmsb_wrap #txtSearch:focus { outline: none;} .pmsb_wrap input[type="submit"] { padding: 7px 10px; border: none; color: #fff; background-color: #009DE0; transition: all 0.3s ease;} .pmsb_wrap input[type="submit"]:hover { background-color: #D57425;} /* === DIGICOM TIMELINE === */ /* general */ .sw-timeline { } .sw-timeline-posts { } .sw-timeline-post { display: flex; justify-content: flex-start; margin: 0 0 30px 0; padding: 0; } .sw-timeline-post .post-images { } .sw-timeline-post .post-thumbnail-image { display: inline-block; width: 100px; height: 100px; margin: 0 20px 0 0; position: relative; background-color: #efefef; overflow: hidden; background-size: cover; background-position: center center; } .sw-timeline-post .post-thumbnail-image .post-thumbnail-image-overlay { display: block; position: absolute; bottom: 0; right: 0; width: 100%; height: 100%; z-index: 5; background-size: cover; background-position: bottom right; background-repeat: no-repeat; } .sw-timeline-post .post-content { } .sw-timeline-post .post-content .post-title{ font-size: 18px; font-weight: 700; color: #a21617;} .sw-timeline-post .post-content .post-author { margin: 0; color: #d6592e; display:none;} .sw-timeline-post .post-content .post-author span { font-weight: 700; } .sw-timeline-post .post-content .post-date { margin: 0; color: #d6592e; } .sw-timeline-post .post-content .post-date span { font-weight: 700; display:none;} .sw-timeline-post .post-content .post-message { } .sw-timeline-post .post-attachments {} .sw-timeline-post .post-attachments .post-files {} .sw-timeline-post .post-attachments .post-files .post-file {} .sw-timeline-post .post-attachments .post-files .post-file a { display: block; padding: 2px 0 2px 10px; position: relative; } .sw-timeline-post .post-attachments .post-files .post-file a:before { content: ""; display: block; width: 6px; height: 6px; position: absolute; top: 10px; left: 0; background-color: #a21617; } .sw-timeline-post .post-attachments .post-files .post-file a:hover { } /* list specific */ .sw-timeline.list { } .sw-timeline-footer { padding: 10px 0; text-align: center;} .sw-timeline-footer .sw-timeline-page-number { display: inline-block; margin: 0 5px; padding: 4px 10px; } .sw-timeline-footer .sw-timeline-button { display: inline-block; margin: 0 auto; padding: 5px 15px; color: #ffffff; background-color: #a21617; transition: all .3s ease; } .sw-timeline-footer .sw-timeline-button:hover { text-decoration: none; background-color: #db2122; } .sw-timeline-footer .sw-timeline-button span {color: #fff; } /* recent specific */ .sw-timeline.recent { } .sw-timeline.recent .sw-timeline-posts { display: flex; justify-content: space-between; margin: 0; padding: 0; flex-wrap: wrap; } .sw-timeline.recent .sw-timeline-post { width: 48%; display:block; border: 1px solid #eee;} .sw-timeline.recent .sw-timeline-post .post-thumbnail-image { display: block; width: 100%; height: 140px; margin: 0 0 10px 0; position: relative; background-size: cover; } .sw-timeline.recent .sw-timeline-post .post-content { padding: 5px 10px; max-height: 120px; overflow: hidden; position: relative; } .sw-timeline.recent .sw-timeline-post .post-content:after { content: ""; display: block; width: 100%; height: 20px; position: absolute; bottom: 0; left: 0; background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); } .sw-timeline.recent .timeline-redirect-link { padding: 10px 0; } .sw-timeline.recent .timeline-redirect-link .sw-timeline-list-link { display: inline-block; margin: 0 auto; padding: 5px 15px; color: #ffffff; background-color: #a21617; transition: all .3s ease; } .sw-timeline.recent .timeline-redirect-link .sw-timeline-list-link:hover { text-decoration: none; background-color: #db2122; } /* === DIGICOM CALENDAR === */ /* CALENDAR WRAPPER */ .digicom-module-title {display:none;} .sw-calendar { } /* CALENDAR HEADER */ .sw-calendar-header { display: flex; justify-content: space-between; align-items: center; margin: 0 0 20px 0; padding: 0; border-bottom: 2px solid #eee; } .sw-calendar-title { margin:10px 0; font-size: 24px; font-weight: 700; color: #db2122; } a.sw-calendar-button { display: inline-block; padding: 5px 15px; color: #fff; background-color:#a21617; cursor: pointer; } a.sw-calendar-button:hover { text-decoration: none; background-color: #db2122; } a.sw-calendar-button.previous {} a.sw-calendar-button.next {} /* CALENDAR ITEMS */ .sw-calendar-items { } .sw-calendar-item { margin: 0 0 20px 0; padding: 0 0 20px 0; border-bottom: 1px solid #eee;} .sw-calendar-item:last-of-type { margin:0px; border-bottom: none; } .sw-calendar-item-dates { display: flex; justify-content: flex-start; color: #d6592e;} .sw-calendar-item-date { } .sw-calendar-item-date.startdate {} .sw-calendar-item-date.enddate { } .sw-calendar-item-date.enddate:before { content: "-"; display:inline-block; margin: 0 5px; } .sw-calendar-item-date-name {} .sw-calendar-item-date-day {} .sw-calendar-item-date-month {} .sw-calendar-item-date-time {} .sw-calendar-item-title { margin: 0 0 5px 0; color:#a21617; font-size: 24px; font-weight: 700;} .sw-calendar-item-description {} .sw-calendar-item-groups { margin: 0;} .sw-calendar-item-groups span { display: inline-block; margin: 10px 5px 0 0; padding: 2px 7px; border: 1px solid #ddd; font-size: 12px; color: #aaa;} /* .sw-calendar-item-groups span + span:before { content: ", "; } */ /* CALENDAR VIEWER */ .sw-calendar-footer { margin: 10px 0 0 0; } a.sw-calendar-list-link { display: inline-block; padding: 5px 15px; color: #fff; background-color:#a21617; cursor: pointer; } a.sw-calendar-list-link:hover { text-decoration: none; background-color: #db2122; } .sw-calendar.upcoming .sw-calendar-item { margin: 0 0 10px 0; padding: 0 0 10px 0; overflow: hidden;} .sw-calendar.upcoming .sw-calendar-item .sw-calendar-item-dates { float: left; width: 90px; font-size: 18px; } .sw-calendar.upcoming .sw-calendar-item .sw-calendar-item-dates .sw-calendar-item-date.enddate { display:none;} .sw-calendar.upcoming .sw-calendar-item .sw-calendar-item-title { float: right; width: calc(100% - 100px); font-size: 18px; } .sw-calendar.upcoming .sw-calendar-item .sw-calendar-item-description { display: none; } /* ================================================================================ KAART ================================================================================ */ .KaartMainWrapper{} .KaartMainWrapper .KaartWrapper{ padding-top:60%; background-color: #f1fafa; position: relative; background-image: url("images/simon_landkaart.svg"); background-size: cover; background-position: center; border-radius:10px; border:2px solid #a21617;} .KaartMainWrapper .KaartWrapper .Marker{ position:absolute; cursor:pointer; height:20px; width:20px; transform-origin: center center;} .KaartMainWrapper .KaartWrapper .Marker.active{transform:scale(1.3);} .KaartMainWrapper .KaartWrapper .Marker.active svg path{stroke:white; stroke-width:6;} .KaartMainWrapper .LijstWrapper{} .KaartMainWrapper .LijstWrapper .LijstItem .LijstItem-title{background-color:#efefef; border-radius:10px; padding:5px 10px; cursor:pointer; margin-bottom:5px;} .KaartMainWrapper .LijstWrapper .LijstItem.active .LijstItem-title{font-weight:bold; margin-bottom:0; border-radius:10px 10px 0px 0px;} .KaartMainWrapper .LijstWrapper .LijstItem .LijstItem-stip{display:inline-block; height:20px; width:20px; vertical-align:middle; margin-right:10px;} .KaartMainWrapper .LijstWrapper .LijstItem .LijstItem-naam{display:inline-block; vertical-align:middle; } .KaartMainWrapper .LijstWrapper .LijstItem .LijstItem-content{display:none; background-color:#efefef; padding:10px 20px; margin-bottom:5px; border-radius:0px 0px 10px 10px;} .KaartMainWrapper .LijstWrapper .LijstItem.active .LijstItem-content{display:block; } .KaartMainWrapper .LijstWrapper .LijstItem .LijstItem-content .LijstItem-img{width:100%; height:150px; background-size:cover; background-repeat:no-repeat; background-position:center center; margin:10px 0px; border-radius:10px;} @media only screen and (max-width: 768px) { .KaartMainWrapper .LijstWrapper{margin-top:20px;} } /* ================================================================================ ANIMATIONS ================================================================================ */ /* ONLY ON BIGGER SCREENS TO "EXCLUDE" TOUCH DEVICES */ @media only screen and (min-width: 1024px) { .QuickLinksItem .QuickLinksItemLink:hover { animation: bounce-right 0.3s ease ; } .CalendarItem:hover .CalendarDate, .social-media-link:hover { animation: bounce-up 0.3s ease; } .pubViewerHome .pubItem:hover .pubThumbnail { animation: pulsate 0.5s ease; } } @keyframes bounce-right { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 25% { -webkit-transform: translateX(3px); transform: translateX(3px); } 50% { -webkit-transform: translateX(0px); transform: translateX(0px); } 75% { -webkit-transform: translateX(-3px); transform: translateX(-3px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes bounce-up { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 25% { -webkit-transform: translateY(-3px); transform: translateY(-3px); } 50% { -webkit-transform: translateY(0px); transform: translateY(0px); } 75% { -webkit-transform: translateY(3px); transform: translateY(3px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes pulsate { 0% { -webkit-transform: scale(1); transform: scale(1); } 30% { -webkit-transform: scale(.96); transform: scale(.96); } 50% { -webkit-transform: scale(1); transform: scale(1); } 70% { -webkit-transform: scale(.96); transform: scale(.96); } 100% { -webkit-transform: scale(1); transform: scale(1); } } /* ================================================================================ MEDIA QUERIES ================================================================================ */ @media only screen and (max-width: 768px) { .InnerWrapper { max-width: 480px; } .one-half, .one-third, .two-third, .one-fourth, .three-fourth, .one-fifth, .two-fifth, .three-fifth, .four-fifth, .one-sixth, .five-sixth {float:none; margin-right:0; width:100%;} .Row9 {margin-top:20px} #Header { padding: 10px 0; } .HeaderColumnLeft { width: 75%; min-height: 70px;} .HeaderColumnRight { width: 25%; display: flex; align-items: center;justify-content: flex-end; } .HeaderPane { display: none;} .RadMenu, .RadPanelBar, #Search.SearchWrapper, #Menu, #Login { display: none;} .MobileMenuTrigger, #MobileMenu.active { display:block;} #SubMenu {padding:0} #Content { padding: 20px 0 0 0; } .ModLesscherContactFormC .dnnLabel { text-align:left; width:100%} .BigBannerImages { height: 340px;} .BigBannerContent { padding: 10px 60px; } .BigBannerTitle { font-size: 24px;} .BigBannerText { font-size: 16px; } .BigBannerControlButton.Previous, .BigBannerControlButton.Next { bottom: 10px;} .SmallBanner .SmallBannerContent .InnerWrapper { max-width: none !important;} .SmallBanner .SmallBannerContent .SmallBannerItemText {font-size: 24px; /*padding: 0px 20px;*/} .pubViewerHome { margin: 20px 0; } .pubViewerHome .pubItems { display: block; } .pubViewerHome .pubItems .pubItem {width: 100%; /*max-width: 400px; margin: 0 auto 30px auto;*/ } .pubViewerHome .pubItem .pubThumbnail { max-width: 300px; margin: 0 auto;} .pubArticleList .pubItem .pubContent .pubTitle {padding-top:20px} .pubArticleList .pubItem {padding-bottom:40px;} .CalendarViewer { margin: 20px 0; } .CalendarViewer h2 { text-align: center;} #Wrapper:not(.Home) .ThemeDefault {overflow-x:scroll; } #Wrapper:not(.Home) .ThemeDefault .EventDay{min-width:80px;} .QuickLinks { margin: 20px 0; } .QuickLinks h2 { text-align: center;} .QuickLinksItem .QuickLinksItemLink { font-size: 18px; } .BlockLinks { display: block;padding: 40px 0; } .BlockLinkItem { width: 100%; max-width: 300px; margin: 0 auto 40px auto; } .BlockLinkItem:last-child{ margin-bottom: 0;} .BlockLinkItem .BlockLinkItemLinkText { font-size: 18px; } /* SMOELENBOEK - 2SXC */ .Medewerkerslijst{ } .MedewerkerslijstItems{ display: flex; flex-wrap: wrap; list-style-type: none; margin: 0; padding: 0; } .MedewerkerslijstItem{ width: 47.5%; } .MedewerkerslijstItem:nth-child(3n+3){ margin-right: 5%; } .MedewerkerslijstItem:nth-child(2n+2){ margin-right: 0; } } @media only screen and (max-width: 480px) { .InnerWrapper { padding: 0 10px; } .HeaderColumnLeft { min-height: 50px;} .BigBannerContent { padding: 10px 0; } .BigBannerContent a.BigBannerLink { margin: 0 55px; } .BigBannerControlButton.Previous { left: 10px;} .BigBannerControlButton.Next { right: 10px;} .SmallBanner .SmallBannerItems { height: 240px;} .SmallBanner .SmallBannerContent .InnerWrapper { max-width: none !important;} .SmallBanner .SmallBannerContent .SmallBannerItemText {font-size: 18px; padding: 0px;} .SmallBannerControlButton.Previous { left: 10px;} .SmallBannerControlButton.Next { right: 10px;} .QuickLinksItem .QuickLinksItemLink { font-size: 16px; } .pubArticleList .pubControls {display:none;} }